<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="signal.css">
    <script src="jquery.min.js"></script>
    <style>
        .box {
            width: 250px;
            height: 52px;
            padding: 15px 30px;
            border: 2px solid #ccc;
            border-radius: 16px;
            margin: 0 auto;
            background-color: #333;
        }
        
        .box .second {
            width: 60px;
            color: #666;
            font-size: 280%;
            line-height: 50px;
            padding-left: 6px;
            margin-left: 5px;
            border: 1px solid #fff
        }
        
        .box div {
            margin-left: 5px;
            float: left;
            width: 50px;
            height: 50px;
            border-radius: 50px;
            border: 1px solid #666;
        }
        
        .box .second {
            border: 0;
            color: #eee;
        }
        
        .off {
            background-color: #eee;
        }
        
        .red {
            background-color: red;
        }
        
        .yellow {
            background-color: yellow;
        }
        
        .green {
            background-color: #26ff00;
        }
    </style>
</head>

<body>
    <div class="box">
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="green"></div>
        <div class="second" id="second"></div>
    </div>
    <script>
        $(function() {
            // 创建信号灯对象
            var signal = {
                red: {
                    el: document.getElementById('red'),
                    duration: 30,
                    style: ['red', 'off', 'off'],
                },
                yellow: {
                    el: document.getElementById('yellow'),
                    duration: 5,
                    style: ['off', 'yellow', 'off'],
                },
                green: {
                    el: document.getElementById('green'),
                    duration: 35,
                    style: ['off', 'off', 'green'],
                },
                // 倒计时对象
                second: {
                    el: document.getElementById('second')
                },
                // 切换下一个灯
                change: function(next) {
                    this.red.el.className = next.style[0];
                    this.yellow.el.className = next.style[1];
                    this.green.el.className = next.style[2];
                },
                // 设置倒计时数字
                setNum: function(num) {
                    this.second.el.innerHTML = num < 10 ? '0' + num : num;
                }
            };
            // 为每个灯设置下一个灯对象
            signal.red.next = signal.green;
            signal.green.next = signal.yellow;
            signal.yellow.next = signal.red;
            // 设置页面刚打开时显示的灯和倒计时
            var current = signal.green;
            var timeout = current.duration;
            signal.change(current);
            signal.setNum(timeout);
            // 定时器
            setInterval(function() {
                if (--timeout == 0) {
                    current = current.next; // 切换到下一个灯
                    timeout = current.duration; // 重置倒计时
                    signal.change(current); // 切换灯
                }
                signal.setNum(timeout);
            }, 1000);
        })
    </script>
</body>

</html>